<template>
  <div>
    <el-dialog title="配置用户角色" :visible.sync="dialogVisible"  width="600px" :before-close="handleClose" :key="userId">
      <el-form class="demo-form-inline userRoleConfig" ref="form">
        <el-form-item required>
          <el-checkbox-group v-model="roleNames">
            <el-checkbox 
              name="roleNames"   
              :checked="item.selected"     
              v-for="item in rolelist"
              :key="item.roleId"
              :label="item.roleName"
              :aria-valuemax="item.roleId"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import apibaseManager from "@/api/baseManager/user";
export default {
  name: "dialogRoleDeploy",
  data() {
    return {
      userId:'',
      rolelist: [],
      roleNames: [],
      dialogVisible: false
    };
  },
  methods: {
    open(row) {
      this.userId = row.userId
      this.dialogVisible = true;
      this.roleNames = []
      this.rolelist = null;
      apibaseManager.getSysUserRoleList(row).then(res => {
        this.rolelist = res.data.list;
      });
    },
    handleClose(){

    },
    //提交
    submit() {
      let ids = [];
      for (let i = 0; i < this.roleNames.length; i++) {
        for (let j = 0; j < this.rolelist.length; j++) {
          if (this.roleNames[i] == this.rolelist[j].roleName) {
            ids.push(this.rolelist[j].roleId);
            break;
          }
        }
      }
      
      let formData = {
       userId:this.userId,
       roleIds:ids.join(",")
      }
      apibaseManager.addSysUserRole(formData).then(res => {
        this.$parent.getList();
        this.$message({ type: "success", message: "角色配置成功" });
        this.dialogVisible = false;
      });
    }
  }
};
</script>

<style>
.userRoleConfig .el-checkbox__label {
  width: 90px;
}
</style>


